<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.agentData" :rules="rules" label-width="220px">
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>类型信息</p>
                        </section>
                        <el-form-item class="mt10" label="等级权重：" prop="agentLevel">
                            <section style="display: flex; flex-direction: column;">
                                <el-input class="width450" :disabled="state.status == 'edit' ? true : false" v-model.number="state.agentData.agentLevel" placeholder="请输入权重等级" maxlength="8"
                                    show-word-limit :precision="0" :step="1" :min="0"/>
                                <explainBox msg="权重值，代表当前代理级别，越大代表级别越高，设置后不可修改" color="var(--el-color-primary-light-2)" />
                            </section>
                        </el-form-item>
                        <el-form-item class="mt10" label="代理图标：" prop="agentName">
                            <section>
                                <el-image v-if="state.agentData.agentLevelAvatar != ''" class="mr20"
                                    style="width:64px; height: 64px;border-radius: 5px;" :src="state.agentData.agentLevelAvatar" fit="cover" />
                                <section v-else class="selector-img" @click="addImg('imgUrl', 0)">
                                    <el-icon size="30" color="#999">
                                        <Plus />
                                    </el-icon>
                                </section>
                            </section>
                        </el-form-item>
                        <el-form-item class="mt10" label="代理名称：" prop="agentName">
                            <el-input class="width450" v-model="state.agentData.agentName" placeholder="请输入代理名称" maxlength="11" show-word-limit />
                        </el-form-item>
                        <el-form-item label="进货折扣：" prop="agentPurchaseDiscount">
                            <el-input class="width450" v-model="state.agentData.agentPurchaseDiscount" placeholder="请输入进货折扣">
                                <template #append>%</template>
                            </el-input>
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>充值账户设置</p>
                        </section>
                        <el-form-item label="充值权限：">
                            <el-switch v-model="state.agentData.agentIsRecharge" :active-value=1 :inactive-value=0 />
                        </el-form-item>
                        <el-form-item label="佣金转货款权限：">
                            <el-switch v-model="state.agentData.agentIsLoans" :active-value=1 :inactive-value=0 />
                        </el-form-item>
                        <el-form-item label="最低充值额度：" prop="agentMinRecharge">
                            <el-input class="width450" v-model="state.agentData.agentMinRecharge" placeholder="请输入最低充值额度">
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>代理加入设置</p>
                        </section>
                        <el-form-item label="加入任务：">
                            <section style="display:block;width: 100%">
                                <el-radio-group v-model="state.agentData.agentJoinTask">
                                    <el-radio :label=0>无任务</el-radio>
                                    <el-radio :label=1>有任务</el-radio>
                                </el-radio-group>
                                <section v-if="state.agentData.agentJoinTask == 1">
                                    <el-table :data="state.tableData"  style="width: 100%" border>
                                        <el-table-column label="任务类型">
                                            <template #default>
                                                <el-select v-model="state.agentData.agentTaskType" placeholder="请选择">
                                                    <el-option label="首次进货" :value="0"> </el-option>
                                                    <el-option label="首次充值" :value="1"> </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="任务金额" v-if="state.agentData.agentTaskType == 1">
                                            <template #default>
                                                <el-input v-model="state.agentData.agentTaskPurchaseMoney" placeholder="请输入" >
                                                    <template #append>
                                                        <span>元</span>
                                                    </template>
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首进对象" v-if="state.agentData.agentTaskType == 0">
                                            <template #default>
                                                <el-select v-model="state.agentData.agentTaskPurchase" placeholder="请选择">
                                                    <el-option label="总部" :value="0"> </el-option>
                                                    <el-option label="进货上级" :value="1"> </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首进类型" v-if="state.agentData.agentTaskType == 0">
                                            <template #default>
                                                <el-select v-model="state.agentData.agentTaskPurchaseType" placeholder="请选择">
                                                    <el-option label="代理选购" :value="0"> </el-option>
                                                    <el-option label="组合套餐" :value="1"> </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="套餐设置" v-if="state.agentData.agentTaskType == 0 && state.agentData.agentTaskPurchaseType == 1">
                                            <el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addGoodsFile()">
                                                套餐选择
                                            </el-tag>
                                        </el-table-column>
                                        <el-table-column label="任务金额" v-if="state.agentData.agentTaskType == 0 && state.agentData.agentTaskPurchaseType == 0">
                                            <template #default>
                                                <el-input v-model="state.agentData.agentTaskPurchaseMoney" placeholder="请输入" >
                                                    <template #append>
                                                        <span>元</span>
                                                    </template>
                                                </el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首进折扣" v-if="state.agentData.agentTaskType == 0 && state.agentData.agentTaskPurchaseType == 0">
                                            <template #default>
                                                <el-select v-model="state.agentData.agentTaskPurchaseDiscountType" placeholder="请选择"  class="width140">
                                                    <el-option label="默认折扣" :value=0 />
                                                    <el-option label="自定义折扣" :value=1 />
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首进折扣" v-if="state.agentData.agentTaskType == 0 &&
                                            state.agentData.agentTaskPurchaseType == 0 &&
                                            state.agentData.agentTaskPurchaseDiscountType == 1">
                                            <el-input v-model="state.agentData.agentTaskPurchaseDiscountValue" placeholder="请输入" >
                                                <template #append>
                                                    <span>%</span>
                                                </template>
                                            </el-input>
                                        </el-table-column>
                                    </el-table>
                                </section>
                                <explainBox msg="代理加入条件" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                            </section>
                        </el-form-item>
                        <el-form-item v-if="state.agentData.goodsList.length > 0" class="mt10" label="套餐信息：">
                            <section style="width: 100%"> 
                                <el-table :data="state.agentData.goodsList" border>
                                    <el-table-column label="编码" width="90" align="center">
                                        <template #default="scope">
                                            <span>{{ scope.row.data.skuId }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="图片" align="center">
                                        <template #default="scope">
                                            <div style="display: flex;justify-content:center;align-items: center;">
                                                <el-image style="width:32px;height: 32px;" :src="scope.row.data.imgUrl" fit="cover" />
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="商品名称"  align="center">
                                        <template #default="scope">
                                            <span> {{ scope.row.data.spuName }} </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="类型"  align="center">
                                        <template #default="scope">
                                            <span>{{ scope.row.data.skuList[0].skuTypeName }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="零售价"  align="center">
                                        <template #default="scope">
                                            <span>{{ scope.row.data.skuList[0].lowPrice }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="title" label="操作" width="120" show-overflow-tooltip>
                                        <template #default="scope">
                                            <el-button :disabled="state.status == 'look'" text type="primary" @click="delItem(scope.$index)">
                                                移除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </section>
                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5" style="background:var(--el-color-primary-light-9);">
                            <p>基本设置</p>
                        </section>
                        <el-form-item class="mt10" label="最低进货额度：" prop="agentMinPurchase">
                            <el-input class="width450" v-model="state.agentData.agentMinPurchase" 
                                placeholder="请输入最低进货额度" >
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="授权有效期：" prop="agentValidMonth">
                            <section style="display:block;">
                                <el-input :disabled="state.agentData.agentValidityType == 3" class="width450" placeholder="请输入" v-model="state.agentData.agentValidMonth">
									<template #append>
										<el-select class="width80" placeholder=""  v-model="state.agentData.agentValidityType">
											<el-option label="日" :value=0 />
											<el-option label="月" :value=1 />
											<el-option label="年" :value=2 />
											<el-option label="不限" :value=3 />
										</el-select>
									</template>
								</el-input>
                                <section>
                                <explainBox msg="授权有效期" width='450px'
                                    color="var(--el-color-primary-light-2)" :isPicUrl=true picUrl="https://vipuser3.eweishop.com/static/dist/shop/image/goods/thumb-video-ratio.png"/>
                                </section>
                            </section>
                        </el-form-item>
                        <el-form-item label="注册提示语：">
                            <el-input class="width450" v-model="state.agentData.agentPrompt"
                                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                placeholder="注册提示语"
                            />
                        </el-form-item>
                    </el-form>
                </section>
                <section style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
            <AddInformation ref="addInformationRef" @selectFun="selectFun" />
            <useTypeDialog ref="useTypeDialogRef" @useTypeListFun="useTypeListFun" />
            <goodSelectDialog ref="goodSelectDialogRef" @goodsSubmitFun="goodsSubmitFun" />
        </div>
	</div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { agentAdd,agentInfo } from "/@/api/agent";
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute , useRouter} from 'vue-router';
const router = useRouter();
const route = useRoute();
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const useTypeDialog = defineAsyncComponent(() => import('/@/components/createGoods/useTypeDialog.vue'))
// 引入组件
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/goodSelect.vue'));
// 定义变量内容
const goodSelectDialogRef = ref();
const useTypeDialogRef = ref()
const ruleFormRef = ref<FormInstance>()
const addInformationRef = ref()
const state = reactive({
    query: {
        // 时间选择
		timeList: [
			{ value: 0, label: '不限时间' },
            { value: 1, label: '1个月' },
            { value: 2, label: '2个月' },
            { value: 3, label: '3个月' },
            { value: 4, label: '4个月' },
            { value: 5, label: '5个月' },
            { value: 6, label: '6个月' },
            { value: 7, label: '7个月' },
            { value: 8, label: '8个月' },
            { value: 9, label: '9个月' },
            { value: 10, label: '10个月' },
            { value: 11, label: '11个月' },
            { value: 12, label: '12个月' },
            { value: 13, label: '13个月' },
            { value: 14, label: '14个月' },
            { value: 15, label: '15个月' },
            { value: 16, label: '16个月' },
            { value: 17, label: '17个月' },
            { value: 18, label: '18个月' },
            { value: 19, label: '19个月' },
            { value: 20, label: '20个月' },
            { value: 21, label: '21个月' },
            { value: 22, label: '22个月' },
            { value: 23, label: '23个月' },
            { value: 24, label: '24个月' },
            { value: 25, label: '25个月' },
            { value: 26, label: '26个月' },
            { value: 27, label: '27个月' },
            { value: 28, label: '28个月' },
            { value: 29, label: '29个月' },
            { value: 30, label: '30个月' },
            { value: 31, label: '31个月' },
            { value: 32, label: '32个月' },
            { value: 33, label: '33个月' },
            { value: 34, label: '34个月' },
            { value: 35, label: '35个月' },
            { value: 36, label: '36个月' }
		],
    },
    status:'',
	// 添加图片类型
	addFileType: '',
    agentData:{
        agentLevelId: null,
        agentLevel: null, //代理权重等级
        agentLevelAvatar:'',
        agentName: '', // 代理级别名称
        agentPurchaseDiscount: '', // 代理进货折扣
        agentIsRecharge: 0, // 代理充值权限
        agentIsLoans: 0,//总分充值货款账户权限：
        agentMinRecharge: null,//最低充值额度
        agentJoinTask: 0,//加入任务：0无任务 1 有任务
        agentTaskType: 0,//任务类型 首进任务或者折扣任务
        agentTaskPurchase: 0,//首进对象：0总部 1上级
        agentTaskPurchaseType: 0,//首进类型：0代理选购 1组合套餐
        goodsList:[],
        agentTaskPurchaseMoney: null,//任务金额
        agentTaskPurchaseDiscountType: 0, // 收进折扣类型 0 默认折扣 1 自定义折扣
        agentTaskPurchaseDiscountValue: 0,// 首进折扣 自定义折扣数值
        agentMinPurchase: null,//最低进货额度
        agentValidMonth: null,//授权有效期
        agentValidityType: 3,
        agentPrompt: '',//注册提示语句
    },
    tableData:[{}]
})

const rules = reactive<FormRules<any>>({

})

// 使用类型选择弹窗
const addGoodsFile = () => {
    goodSelectDialogRef.value.openDialog(state.agentData.goodsList);
}

// 选中关联商品
const goodsSubmitFun = (list: any) =>{
	state.agentData.goodsList = list.map((item:any) => {return {data:item}});
}

// 图片选中
const addImg = (type: string, isArr: Number) => {
	state.addFileType = type;
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	state.agentData.agentLevelAvatar = fileList[0]
}

// 页面加载时
onMounted(async ()  => {
    state.status = route.query.status;
    console.log(route.query.status);
    if (route.query.status == 'edit' || route.query.status == 'look') {
        const { results } = await agentInfo(route.query.id);
        state.agentData.agentLevelId = results.agentLevelId;
        state.agentData.agentLevel = results.agentLevel;
        state.agentData.agentLevelAvatar = results.agentLevelAvatar;
        state.agentData.agentName = results.agentName;
        state.agentData.agentPurchaseDiscount = results.agentPurchaseDiscount;
        state.agentData.agentIsRecharge = results.agentIsRecharge;
        state.agentData.agentIsLoans = results.agentIsLoans;
        state.agentData.agentMinRecharge = results.agentMinRecharge;
        state.agentData.agentJoinTask = results.agentJoinTask;
        state.agentData.agentTaskType = results.agentTaskType;
        state.agentData.agentTaskPurchase = results.agentTaskPurchase;
        state.agentData.agentTaskPurchaseType = results.agentTaskPurchaseType;
        state.agentData.goodsList = results.product.map((item:any) => {return {data:item}});
        state.agentData.agentTaskPurchaseMoney = results.agentTaskPurchaseMoney;
        state.agentData.agentTaskPurchaseDiscountType = results.agentTaskPurchaseDiscountType;
        state.agentData.agentTaskPurchaseDiscountValue = results.agentTaskPurchaseDiscountValue;
        state.agentData.agentMinPurchase = results.agentMinPurchase;
        state.agentData.agentValidityType = results.agentValidityType;
        state.agentData.agentValidMonth = results.agentValidMonth;
        state.agentData.agentPrompt = results.agentPrompt;
    }
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate( async (valid, fields) => {
		if (valid) {
			let params = {
                agentLevelId: state.agentData.agentLevelId,
                agentLevel: Number(state.agentData.agentLevel), //代理权重等级
                agentLevelAvatar: state.agentData.agentLevelAvatar,
                agentName: state.agentData.agentName, // 代理级别名称
                agentPurchaseDiscount: Number(state.agentData.agentPurchaseDiscount), // 代理进货折扣
                agentIsRecharge: state.agentData.agentIsRecharge, // 代理充值权限
                agentIsLoans: state.agentData.agentIsLoans,//总分充值货款账户权限：
                agentMinRecharge: Number(state.agentData.agentMinRecharge),//最低充值额度
                agentJoinTask: state.agentData.agentJoinTask,//加入任务：0无任务 1 有任务
                agentTaskType: state.agentData.agentTaskType,//任务类型 首进任务或者折扣任务
                agentTaskPurchase: state.agentData.agentTaskPurchase,//首进对象：0总部 1上级
                agentTaskPurchaseType: state.agentData.agentTaskPurchaseType,//首进类型：0代理选购 1组合套餐
                productIds:state.agentData.agentTaskPurchaseType == 1 ? state.agentData.goodsList.map((obj:any) => obj.data.skuId) : [],
                agentTaskPurchaseMoney: state.agentData.agentTaskPurchaseMoney,//任务金额
                agentTaskPurchaseDiscountType: state.agentData.agentTaskPurchaseDiscountType, // 收进折扣类型 0 默认折扣 1 自定义折扣
                agentTaskPurchaseDiscountValue: state.agentData.agentTaskPurchaseDiscountValue,// 首进折扣 自定义折扣数值
                agentMinPurchase: Number(state.agentData.agentMinPurchase),//最低进货额度
                agentValidMonth: Number(state.agentData.agentValidMonth),//授权有效期
                agentPrompt: state.agentData.agentPrompt,//注册提示语句
            }
            const { method } = await agentAdd(params);
            if(method == 'success'){
                ElMessage.success('提交成功');
                router.go(-1)
            }
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
}
.el-form{
    flex:1;
    overflow-y: auto;
    position: relative;
}
.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}
.typeBox{
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    span:first-child{
        font-weight: 600;
    }
    span:last-child{
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}
.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;
    .virtual_san{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }
    .virtual_dui{
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}
.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>
